<template>
    <div>
        <el-row type="flex" justify="space-between" align="middle">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>{{$t('exempt.baseInfo.auditManagement')}}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="auditDetail.mode == 'AUDIT'">{{$t('exempt.baseInfo.auditDetails')}}</el-breadcrumb-item>
                <el-breadcrumb-item v-else-if="auditDetail.mode == 'VIEW'">{{$t('exempt.baseInfo.auditView')}}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="text" @click="goBack">返回</el-button>
        </el-row>
        <el-card body-style="padding:0 20px 20px 20px">
            <h2 slot="header" style="font-weight:bold">{{$t('exempt.baseInfo.info')}}</h2>
            <div class="border-form">
                <el-row type="flex" justify="center" align="middle" class="border-bt">
                    <el-col class="text-right border-rg bg" :span="6">{{$t('label.stuName')+'：'}}</el-col>
                    <el-col :span="6" class="pd-5px">
                        {{ auditDetail.studentName }}
                    </el-col>
                    <el-col :span="6" class="text-right border-lf border-rg bg">{{$t('label.stuCode')+'：'}}</el-col>
                    <el-col :span="6" class="pd-5px">
                        {{ auditDetail.studentId }}
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" align="middle" class="border-bt">
                    <el-col class="text-right border-rg bg" :span="6">{{$t('label.college')+'：'}}</el-col>
                    <el-col :span="6" class="pd-5px">
                        {{ auditDetail.facultyI18n }}
                    </el-col>
                    <el-col :span="6" class="text-right border-lf border-rg bg">{{$t('label.major')+'：'}}</el-col>
                    <el-col :span="6" class="pd-5px">
                        {{ auditDetail.professionI18n }}
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card>
            <h2 slot="header" style="font-weight:bold">{{$t('exempt.baseInfo.applicationDetail')}}</h2>
            <h3 style="font-weight:bold">{{$t('exempt.baseInfo.courseForm')}}</h3>
            <edu-table
                stripe
                :pagination="false"
                :selection="false"
                style="width: 100%"
                tooltip-effect="light"
                :data="courseList"
            >
                <el-table-column :label="$t('label.classCode')" prop="classCode" />
                <el-table-column :label="$t('label.courseCode')" prop="courseCode" />
                <el-table-column
                    :label="$t('label.courseName')"
                    prop="courseName"
                    min-width="120"
                    show-overflow-tooltip
                />
                <el-table-column
                    :label="$t('label.openClassCollege')"
                    prop="collegeI18n"
                    min-width="100"
                    show-overflow-tooltip
                />
                <el-table-column :label="$t('exempt.baseInfo.hours')"  prop="hours" />
                <el-table-column :label="$t('label.credits')" prop="credits" />
            </edu-table>
            <el-row style="padding:20px 0">
                <el-col :span="2">{{$t('exempt.baseInfo.applicationMode') +'：'}}</el-col>
                <el-col :span="22">
                    {{auditDetail.applyType == '1' ?$t('exempt.baseInfo.noListening'):$t('exempt.baseInfo.noTraining')}}
                </el-col>
            </el-row>
            <el-row style="padding:20px 0">
                <el-col :span="2">{{$t('exempt.baseInfo.applicationInstructions') +'：'}}</el-col>
                <el-col :span="22">
                    {{ auditDetail.applyDesc }}
                </el-col>
            </el-row>
            <el-row style="padding:20px 0;" v-if="auditDetail.mode === 'AUDIT'">
                <el-col :span="2">{{$t('exempt.baseInfo.auditInstructions') +'：'}}</el-col>
                <el-col :span="22">
                    <el-input
                        type="textarea"
                        :maxlength="500"
                        v-model="approvalInfo.content"
                    ></el-input>
                </el-col>
            </el-row>
            <el-row style="padding:20px 0;" type="flex" align="middle">
                <el-col :span="2">{{$t('course.ProveMaterial')+'：'}}</el-col>
                <el-col :span="22">
                    <el-button type="text" @click="downLoad(auditDetail.attachFile)">
                        {{ auditDetail.attachFile }}
                    </el-button>
                </el-col>
            </el-row>
            <el-row style="text-align:right" v-if="auditDetail.mode === 'AUDIT'">
                <el-button type="danger" @click="handleClick('REJECT')">{{$t('message.refuse')}}</el-button>
                <el-button type="primary" @click="handleClick('APPROVE')">{{$t('message.pass')}}</el-button>
            </el-row>
        </el-card>
        <el-card>
            <h1 slot="header" style="font-weight:bold">{{$t('exempt.baseInfo.reviewProgress')}}</h1>
            <edu-table
                stripe
                :pagination="false"
                :selection="false"
                style="width: 100%"
                tooltip-effect="light"
                :data="approveHistory"
            >
                <el-table-column :label="$t('message.time')" prop="approvalTime" />
                <el-table-column :label="$t('label.operator')" prop="reviewerName" />
                <el-table-column :label="$t('message.department')" prop="roleI18N" />
                <el-table-column :label="$t('label.operation')" prop="processOperateI18N" />
                <el-table-column :label="$t('exempt.baseInfo.explanation')" prop="reasonDesc" />
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { exHistory, editStudyType, exSwitch, queryApplyInfoById} from 'common/src/api/exempt/exempt'
import { selectApproFlow, approvalThrough, approvalReject } from 'common/src/api/approval'
export default {
    props: ['publicInfo'],
    data() {
        return {
            auditDetail: {},
            courseList: [],
            approveHistory: [],
            approvalInfo: {
                uid: '',
                no: '',
                content: '',
                approveAttachment: [],
                oaNo: ''
            }
        }
    },
    mounted() {
        if (this.publicInfo && this.publicInfo.no) {
            this.getInfo();
            return;
        }
        let detail = this.$route.query
        this.courseList.push({
            courseCode: detail.courseCode,
            courseName: detail.courseName,
            facultyI18n:detail.facultyI18n,
            collegeI18n: detail.collegeI18n,
            credits: detail.credits,
            hours: detail.hours,
            classCode: detail.classCode
        })
        this.auditDetail = detail
        this.getApproveList()
        this.getDetails(detail.workflowNo)
    },
    methods: {
        async getInfo(){
            let content, {applicantId, no, isApproveShow} = this.publicInfo;
            try {
                content  = JSON.parse(this.publicInfo.content);
            }catch(error){
                content = this.publicInfo.content;
            }
            this.approvalInfo.uid = applicantId;
            this.approvalInfo.no = no;
            let data = await this.getAuditList(content.id);
            let detail = data[0] || {};
            this.courseList.push({
                courseCode: detail.courseCode,
                courseName: detail.courseName,
                facultyI18n:detail.facultyI18n,
                collegeI18n: detail.collegeI18n,
                credits: detail.credits,
                hours: detail.hours,
                classCode: detail.classCode
            });
            detail.mode = !isApproveShow ? 'AUDIT' : 'VIEW';
            this.auditDetail = detail;
            this.getApproveList();
        },
        async getAuditList(id) {
            let params = {
                id
            };
            let { code, data } = await queryApplyInfoById(params);
            if (code !== 200) return;
            return data || [];
        },
        // 获取申请详情
        async getDetails(id) {
            const res = await selectApproFlow(id)
            if (res.code === 200 && res.data) {
                let cont = res.data.content ? JSON.parse(res.data.content) : {}
                if (cont) {
                    //保存审核参数
                    this.approvalInfo.uid = res.data.applicantId
                    this.approvalInfo.no = res.data.no
                }
            }
        },
        goBack() {
            if (this.publicInfo && this.publicInfo.no) {
                this.$parent.showRollDetail && this.$parent.showRollDetail();
                return;
            }
            let path = '/EXLAudit';
            if (this.auditDetail && this.auditDetail.isApply) {
                path = '/EXLApplication';
            }
            this.$router.push({path});
            this.$store.commit('delete_tabs', '/EXLAuditDetail')
        },
        async handleClick(mode) {
            if (mode == 'APPROVE') {
                let { code } = await approvalThrough(this.approvalInfo)
                if (code == 200){
                    exSwitch({
                        mode: '0'
                    }).then(res =>{
                        if (res.code == 200) {
                            let calendarId = res.data && res.data[0] && res.data[0].calendarId || '';
                            editStudyType({
                                studentId: this.auditDetail.studentId,
                                courseCode: this.auditDetail.courseCode,
                                calendarId: calendarId,
                                courseTakeType: this.auditDetail.applyType == '1' ? '4' : '3',
                                mxbmkType: 1   // 1-审核通过  2-撤回
                            });
                        }
                    })
                    this.goBack();
                }
            } else {
                if (!this.approvalInfo.content) {
                    this.$message({
                        type: 'warning',
                        message: '请先填写驳回意见'
                    })
                    return
                }
                let { code } = await approvalReject(this.approvalInfo)
                if (code == 200) this.goBack()
            }
        },
        downLoad(url) {
            window.location.href = '/api/commonservice/obsfile/downloadfile?objectkey=' + url
        },
        async getApproveList() {
            let { code, data } = await exHistory(this.auditDetail.workflowNo)
            if (code !== 200) return
            this.approveHistory = data
        }
    }
}
</script>
<style lang="scss" scoped>
.border-form {
    border: 3px solid #ccc;
    .border-bt {
        border-bottom: 1px solid #ccc;
    }
    .border-rg {
        border-right: 1px solid #ccc;
    }
    .border-lf {
        border-left: 1px solid #ccc;
    }
    .bg {
        background-color: rgba(245, 247, 249, 1);
    }
    .pd-5px {
        padding: 5px;
    }
}
</style>